<template>
  <div id="app">
    <ul class="foot">
      <li> 
        <router-link to="/home">
          <img src="http://m.wangjiu.com/htmlResource/images/index/s01.png">
          <p>首页</p>
        </router-link>
      </li>
      <li> 
        <router-link to="/classification">
          <img src="http://m.wangjiu.com/htmlResource/images/index/d02.png">
          <p>分类</p>
        </router-link>
      </li>
      <li>
        <router-link to="/cart">
          <img src="http://m.wangjiu.com/htmlResource/images/index/d03.png">
          <p>购物车</p>
        </router-link>
      </li>
      <li> 
        <router-link to="/mine">
          <img src="http://m.wangjiu.com/htmlResource/images/index/d04.png">
          <p>我的</p>
        </router-link>
      </li>
    </ul>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.foot
  width:100%
  height: 80px
  z-index: 999
  background: #f9f9f9
  position:fixed
  left:0
  bottom:0
  display: flex
  justify-content: space-around
  align-items:center
  li
    width:25%
    text-align:center
    font-size:13px
    img
      width:35px
      height:35px
      margin-top:3px
    p{
      margin-top:5px
    }
</style>
